<template>
    <div>
        <h1>{{ msg }}</h1>
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>学生年龄：{{ age + 1 }}</h2>
        <v-alert border="top" color="red lighten-2" dark>
            I'm an alert with a top border and red color
        </v-alert>
        <v-alert border="right" color="blue-grey" dark>
            I'm an alert with a right border and blue-grey color
        </v-alert>
        <v-alert border="bottom" color="pink darken-1" dark>
            I'm an alert with a bottom border and pink color
        </v-alert>
        <v-alert border="left" color="indigo" dark>
            I'm an alert with a border left type info
        </v-alert>
    </div>
</template>

<script>
export default {
    name: 'Student',
    // props: ['name', 'sex', 'age'],
    props: {
        name: {
            type: String,
            required: true
        },
        sex: {
            type: String,
            required: true
        },
        age: {
            type: Number,
            default: 99
        }
    },
    data() {
        return {
            msg: '我是一个尚硅谷的学生'
        }
    }
}
</script>